<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue4</title>
	</head>
	<body>
		<div id="demo1">
			<!-- |  管道命令，以第一个命令的结果作为第二个命令的输入 -->
			{{message|f2}}
		</div>
		<div id="demo2">
			<!-- 管道的命令顺序不同,作用也不同 -->
			{{message|f1|f3}}
		</div>
		
		<!-- 串联过滤器,过滤器传参-->
		<div id="demo3">
			{{msg1|add(12,5)}}
			{{msg2|add('12','5')}}
		</div>
		
	</body>
</html>
<script src="js/vue.js"></script>
<script type="text/javascript">
	//全局过滤器
	// 匿名函数
	Vue.filter("f1",function(p){
		return 'Hello '+p;
	});
	var v1=new Vue({
		el:"#demo1",
		data:{
			message:"li mai",
		},
		filters:{
			f2:function(p){
				return "Hello World "+p
			}
		}
	});
	
	var v2=new Vue({
		el:"#demo2",
		data:{
			message:"Da mai",
		},
		//局部过滤器
		filters:{
			f3:function(p){
				return p+' '+p.length
			}
		}
	});
	
	var v3=new Vue({
		el:"#demo3",
		data:{
			msg1:9,
			msg2:12
		},
		//局部过滤器
		filters:{
			add:function(n,a,b){
				if(n<10){
					return n+a;
				}else{
					return n+b;
				}
			}
		}
	});
	
</script>